<template>
  <x-modal :visible.sync="show" title="确认放弃付款吗？" width="600" @cancel="onCancel">
    <view class="x-pay-cancel">
      <view class="_content">
        您的订单已提交成功，请在<text class="text">{{ time }}</text>内支付完成。
      </view>
      <view class="_button">
        <view class="_confirm">
          <x-button round @click="onConfirm">继续支付</x-button>
        </view>
        <view class="_cancel" @click="onCancel">暂时放弃</view>
      </view>
    </view>
  </x-modal>
</template>

<script>
import XModal from '@/components/x-modal'
import XButton from '@/components/x-button'

export default {
  name: 'XPayCancel',
  components: {
    XModal,
    XButton
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    time: {
      type: String,
      default: '59分钟'
    }
  },
  data () {
    return {
      show: this.visible
    }
  },
  computed: {},
  watch: {},
  created () {

  },
  methods: {
    onCancel() {
      this.show = false
      this.$emit('update:visible', false)
      this.$emit('cancel')
    },
    onConfirm() {
      this.show = false
      this.$emit('update:visible', false)
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="scss">
  .x-pay-cancel{
    ._content{
      font-size: 30px; text-align: center; color: #646464; padding-bottom: 50px;
      .text{ color: #F41D1D;}
    }
    ._cancel{ text-align: center; font-size: 28px; color: #A4A4A4; padding: 20px;}
  }
</style>
